<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

	<meta charset="utf-8" />

	<title>小傲娇 | 博客主题</title>

	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="../media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/style-metro.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/style.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/style-responsive.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>
	<link href="../media/css/uniform.default.css" rel="stylesheet" type="text/css"/>
	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES -->
	<link rel="stylesheet" type="text/css" href="../media/css/select2_metro.css" />
	<link rel="stylesheet" href="../media/css/DT_bootstrap.css" />
	<!-- END PAGE LEVEL STYLES -->
	<link rel="shortcut icon" href="../media/image/favicon.ico" />

</head>

<!-- BEGIN BODY -->
<body class="page-header-fixed">

	<!-- BEGIN HEADER -->
	<jsp:include page="../include/admin_head.jsp" />
	<!-- END HEADER -->

	<!-- BEGIN CONTAINER -->
	<div class="page-container row-fluid">
	
		<!-- BEGIN SIDEBAR -->
		<jsp:include page="../include/admin_sidebar.jsp" />
		<!-- END SIDEBAR -->

		<!-- BEGIN PAGE -->
		<div class="page-content">

			<!-- BEGIN PAGE CONTAINER-->        
			<div class="container-fluid">

				<!-- BEGIN PAGE HEADER-->

				<div class="row-fluid">

					<div class="span12">

						<!-- BEGIN STYLE CUSTOMIZER -->
						<jsp:include page="../include/admin_tool.jsp" />						
						<!-- END BEGIN STYLE CUSTOMIZER -->  

						<!-- BEGIN PAGE TITLE & BREADCRUMB-->
						<h3 class="page-title">
							主题库 <small>技多不压身，叫我C哥啦</small>
						</h3>

						<!-- 导航栏
						<ul class="breadcrumb">
							<li>
								<i class="icon-home"></i>
								<a href="index.html">Home</a> 
								<i class="icon-angle-right"></i>
							</li>
							<li>
								<a href="#">Data Tables</a>
								<i class="icon-angle-right"></i>
							</li>
							<li><a href="#">Editable Tables</a></li>
						</ul>
						 导航栏end -->
						<!-- END PAGE TITLE & BREADCRUMB-->

					</div>

				</div>
				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->
				<div class="row-fluid">
					<div class="span12">

						<!-- BEGIN EXAMPLE TABLE PORTLET-->
						<div class="portlet box blue">
							<div class="portlet-title">
								<div class="caption"><i class="icon-edit"></i>主题列表</div>
								<div class="tools">
									<a title="收起" href="javascript:;" class="collapse"></a>									
									<a title="刷新" href="javascript:;" class="reload"></a>								
								</div>
							</div>

							<div class="portlet-body">
								<div class="clearfix">
									<div class="btn-group">
										<button id="sample_editable_1_new" class="btn green" onclick="addTheme()">
										添加主题 <i class="icon-plus"></i>
										</button>				
									</div>
									<div class="btn-group" style="float: right;">																		
										<label>
											搜索: <input aria-controls="sample_editable_1" class="m-wrap medium" type="text">
										</label>			
									</div>
								</div>
								
								<table class="table table-striped table-hover table-bordered" id="">
									<thead>
										<tr>
											<th>编号</th>
											<th>主题名</th>
											<th>描述</th>										
											<th colspan="2">操作</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach var="theme" items="${map.objectList }" varStatus="status">
											<tr class="">
												<td>${theme.id }</td>
												<td>${theme.themeName}</td>				
												<td class="center">${theme.themeDisc}</td>
												<td><a class="edit" href="javascript:;" onclick="editTheme(${theme.id })">修改</a></td>
												<td><a class="delete" href="deleteTheme.do?id=${theme.id }">删除</a></td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
								<jsp:include page="../include/page.jsp" />
							</div>
						</div>
						<!-- END EXAMPLE TABLE PORTLET-->
					</div>
				</div>
				<!-- END PAGE CONTENT -->
			</div>
			<!-- END PAGE CONTAINER-->
		</div>
		<!-- END PAGE -->
	</div>

	<!-- END CONTAINER -->

	<!-- BEGIN FOOTER -->
	<jsp:include page="../include/admin_foot.jsp" />
	<!-- END FOOTER -->

	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

	<!-- BEGIN CORE PLUGINS -->
	<script src="../media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
	<script src="../media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
	<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
	<script src="../media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      
	<script src="../media/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- END CORE PLUGINS -->

	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script type="text/javascript" src="../media/js/select2.min.js"></script>
	<script type="text/javascript" src="../media/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="../media/js/DT_bootstrap.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->

	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="../media/js/app.js"></script>
	<script src="../media/js/table-editable.js"></script>    

	<script>
		jQuery(document).ready(function() {       
		   App.init();
		   TableEditable.init();
		   
		   $("#sidebar > li[title='theme']").addClass("start active");
		    
		});
	
		//添加
		function addTheme(){
			$("#updateTheme").modal("hide");
			$("#addTheme").modal("show");
			
		}
		
		//更改
		function editTheme(id){
			$.ajax({
				type:"GET",
				url:"getThemeById.do",
				dataType:"json",
				data:{
					id:id
				},
				success:function(json){
					$("#updateTheme .themeId").val(" ").val(json.id);
					$("#updateTheme .themeName").val(" ").val(json.themeName);
					$("#updateTheme .themeDisc").val(" ").val(json.themeDisc);				
					var tem = "";
					tem += "<img id='themePic' src='"+json.themePic+"' alt='主题图片'  class='themePic' style='height:80px;width:80px'/>";
					$("#updateTheme .themePic").html("").html(tem); //添加图片
				}
			})
			$("#addTheme").modal("hide");
			$("#updateTheme").modal("show");
		}
	</script>

<script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-37564768-1']);  _gaq.push(['_setDomainName', 'keenthemes.com']);  _gaq.push(['_setAllowLinker', true]);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script>
<!-- 
	编辑模态框（Modal）begin 
-->
<div class="modal fade" id="updateTheme" style="display: none; ">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					
				</button>
				<h4 class="modal-title" id="myModalLabel">
					<!--标题-->
					编辑主题
				</h4>
			</div>
			<div class="modal-body">
				<!--在这里添加一些文本-->
				<form action="updateTheme.do" enctype="multipart/form-data" method="post" accept-charset="utf-8" class="form-horizontal" novalidate="novalidate">
					<div class="control-group">
						
						<div class="controls">
							<input name="id" id="themeId" value="" class="themeId" type="hidden" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">主题名<span class="">*</span></label>
						<div class="controls">
							<input name="themeName" id="themeName" value="" required="required" class="themeName" type="text" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">描述<span class="">*</span></label>
						<div class="controls">
							<input name="themeDisc" id="themeDisc" required="required" value="" class="themeDisc" type="text">
						</div>
					</div>
					<div class="control-group">
						<label for="uname" class="control-label">主题图片：</label>
						<div class="controls">
							 <div class="themePic"></div><input class="filePrew" id="uploadPic" title="支持jpg、jpeg、gif、png格式，文件小于200k"  tabIndex="3"  type="file"  size="3" name="file" />			
						</div>
					</div>
					<div class="form-actions">
						<button type="submit" class="btn purple">提交</button>
						<button type="reset" class="btn">重置</button>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!--模态框（Modal） end-->
<!-- 
	添加模态框（Modal）begin 
-->
<div class="modal fade" id="addTheme" style="display: none; ">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					<!--标题-->
					添加主题
				</h4>
			</div>
			<div class="modal-body">
				<!--在这里添加一些文本-->
				<form action="addTheme.do" enctype="multipart/form-data" method="post" accept-charset="utf-8" class="form-horizontal" novalidate="novalidate">
					<div class="control-group">
						<label class="control-label">主题名<span class="">*</span></label>
						<div class="controls">
							<input name="themeName" id="themeName" value="" required="required" class="themeName" type="text" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">描述<span class="">*</span></label>
						<div class="controls">
							<input name="themeDisc" id="themeDisc"  value="" required="required" class="themeDisc" type="text">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">					
							<span>添加图片</span> 
						</label>
						<div class="controls">	
							<input class="filePrew" id="uploadPic" title="支持jpg、jpeg、gif、png格式，文件小于200k"  tabIndex="3"  type="file"  size="3" name="file" />
						</div>				
					</div>
					<div class="form-actions">
						<button type="submit" class="btn purple">提交</button>
						<button type="reset" class="btn">重置</button>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!--模态框（Modal） end-->


</body>
<!-- END BODY -->
</html>

